<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件父传子</title>
    <script src="../../vue2.js"></script>
</head>
<body>
<div id="box">
    <navbar myname="电影" :myright="false" :myparent="parent"></navbar>
    <navbar myname="影院" :myparent="parent"></navbar>
</div>
<script>
    Vue.component("navbar", {
        // props: ["myname","myright"],   //接受父组件(根组件)传过来的myname属性， this.myname
        props:{
            myname:{
                type:String,
                default:''
            },
            myright:{
                type:Boolean,
                default:true
            },
            myparent:{
                type:String,
                default:''
            }
        },   //接受myname,myright属性，并进行属性验证，设置默认属性
        template: `<div>
            <button>left</button>
            <span>{{myname}}-{{myparent}}</span>
            <button v-show="myright">right</button>
        </div>`
    })
    new Vue({
        el: "#box",
        data:{
            parent:"我是父组件动态传过来的parent状态——间接的组件通信交流"
        }
    })</script>
</body>
</html>